body {
    background-color: #e4e4e4;
}

.main {
    width: 1200px;
    margin: 0 auto;
}

img {
    width: 300px;
    height: 400px;
}

section {
    width: 300px;
    height: 400px;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 37%;
    /* perspective: 1000px; */
}

@keyframes rorate1 {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

@keyframes rorate2 {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(-360deg);
    }
}


.main .box1,
.box2 {
    transform-style: preserve-3d;
    position: relative;
    width: 300px;
    height: 400px;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
}

.box1 {
    animation: rorate1 infinite 15s linear;
}

.box2 {
    animation: rorate2 infinite 15s linear;
}

.main .box:hover {
    animation-play-state: paused;
}


.main .box>div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


.main .box div:nth-child(1) {
    transform: translateZ(400px);
}

.main .box div:nth-child(2) {
    transform: rotateY(60deg) translateZ(400px);
}

.main .box div:nth-child(3) {
    transform: rotateY(120deg) translateZ(400px);
}

.main .box div:nth-child(4) {
    transform: rotateY(180deg) translateZ(400px);
}

.main .box div:nth-child(5) {
    transform: rotateY(240deg) translateZ(400px);
}

.main .box div:nth-child(6) {
    transform: rotateY(300deg) translateZ(400px);
}

ul {
    width: 150px;
    height: 30px;
    margin-left: 50%;
    transform: translateX(-50%);
}

ul li {
    display: inline-block;
}

ul li a {
    display: block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 17px;
    border: 2px solid #000;
    border-radius: 50%;
}

ul li a:hover {
    background-color: skyblue;
}